<template>
  <div class="interview-records">
    <h2 class="page-title">面试记录</h2>
    
    <!-- 操作栏 -->
    <div class="action-bar">
      <el-button type="primary" :icon="Plus" @click="showInterviewDialog = true">
        添加面试记录
      </el-button>
      <el-button :icon="Refresh" @click="refreshRecords">刷新</el-button>
    </div>
    
    <!-- 面试记录列表 -->
    <div class="records-table">
      <el-table :data="interviewRecords" style="width: 100%" v-loading="loading">
        <el-table-column prop="candidateName" label="候选人姓名" width="120" />
        <el-table-column prop="position" label="应聘岗位" width="150" />
        <el-table-column prop="interviewer" label="面试官" width="120" />
        <el-table-column prop="interviewTime" label="面试时间" width="180" />
        <el-table-column prop="interviewType" label="面试类型" width="120">
          <template #default="scope">
            <el-tag :type="getInterviewTypeType(scope.row.interviewType)">
              {{ getInterviewTypeText(scope.row.interviewType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="面试状态" width="120">
          <template #default="scope">
            <el-tag :type="getInterviewStatusType(scope.row.status)">
              {{ getInterviewStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="score" label="评分" width="100" />
        <el-table-column prop="feedback" label="面试反馈" min-width="200" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="viewRecord(scope.row)">查看</el-button>
            <el-button size="small" type="primary" @click="editRecord(scope.row)">编辑</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="deleteRecord(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.pageNo"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    
    <!-- 添加/编辑面试记录对话框 -->
    <el-dialog 
      v-model="showInterviewDialog" 
      :title="isEdit ? '编辑面试记录' : '添加面试记录'" 
      width="600px"
      :before-close="handleCloseDialog"
    >
      <el-form :model="interviewForm" :rules="interviewRules" ref="interviewFormRef" label-width="100px">
        <el-form-item label="候选人姓名" prop="candidateName">
          <el-input v-model="interviewForm.candidateName" placeholder="请输入候选人姓名" />
        </el-form-item>
        <el-form-item label="应聘岗位" prop="position">
          <el-input v-model="interviewForm.position" placeholder="请输入应聘岗位" />
        </el-form-item>
        <el-form-item label="面试官" prop="interviewer">
          <el-input v-model="interviewForm.interviewer" placeholder="请输入面试官姓名" />
        </el-form-item>
        <el-form-item label="面试时间" prop="interviewTime">
          <el-date-picker
            v-model="interviewForm.interviewTime"
            type="datetime"
            placeholder="选择面试时间"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="面试类型" prop="interviewType">
          <el-select v-model="interviewForm.interviewType" placeholder="请选择面试类型" style="width: 100%">
            <el-option label="初试" value="first" />
            <el-option label="复试" value="second" />
            <el-option label="终试" value="final" />
            <el-option label="电话面试" value="phone" />
            <el-option label="视频面试" value="video" />
          </el-select>
        </el-form-item>
        <el-form-item label="面试状态" prop="status">
          <el-select v-model="interviewForm.status" placeholder="请选择面试状态" style="width: 100%">
            <el-option label="待面试" value="pending" />
            <el-option label="面试中" value="ongoing" />
            <el-option label="已完成" value="completed" />
            <el-option label="已取消" value="cancelled" />
          </el-select>
        </el-form-item>
        <el-form-item label="评分" prop="score">
          <el-input-number 
            v-model="interviewForm.score" 
            :min="0" 
            :max="100" 
            placeholder="请输入评分"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="面试反馈" prop="feedback">
          <el-input 
            v-model="interviewForm.feedback" 
            type="textarea" 
            :rows="4"
            placeholder="请输入面试反馈"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showInterviewDialog = false">取消</el-button>
          <el-button type="primary" @click="submitInterview">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh } from '@element-plus/icons-vue'

const loading = ref(false)
const showInterviewDialog = ref(false)
const isEdit = ref(false)
const interviewFormRef = ref(null)

// 分页配置
const pagination = ref({
  pageNo: 1,
  pageSize: 10,
  total: 0
})

// 面试记录表单
const interviewForm = ref({
  candidateName: '',
  position: '',
  interviewer: '',
  interviewTime: '',
  interviewType: '',
  status: '',
  score: 0,
  feedback: ''
})

// 表单验证规则
const interviewRules = {
  candidateName: [{ required: true, message: '请输入候选人姓名', trigger: 'blur' }],
  position: [{ required: true, message: '请输入应聘岗位', trigger: 'blur' }],
  interviewer: [{ required: true, message: '请输入面试官姓名', trigger: 'blur' }],
  interviewTime: [{ required: true, message: '请选择面试时间', trigger: 'change' }],
  interviewType: [{ required: true, message: '请选择面试类型', trigger: 'change' }],
  status: [{ required: true, message: '请选择面试状态', trigger: 'change' }],
  score: [{ required: true, message: '请输入评分', trigger: 'blur' }],
  feedback: [{ required: true, message: '请输入面试反馈', trigger: 'blur' }]
}

// 模拟面试记录数据
const interviewRecords = ref([
  {
    id: 1,
    candidateName: '张三',
    position: '前端开发工程师',
    interviewer: '李四',
    interviewTime: '2024-01-01 14:00:00',
    interviewType: 'first',
    status: 'completed',
    score: 85,
    feedback: '技术基础扎实，沟通能力良好，建议进入下一轮面试。'
  },
  {
    id: 2,
    candidateName: '王五',
    position: '产品经理',
    interviewer: '赵六',
    interviewTime: '2024-01-01 15:00:00',
    interviewType: 'second',
    status: 'completed',
    score: 78,
    feedback: '产品思维清晰，但技术理解有待提升。'
  },
  {
    id: 3,
    candidateName: '孙七',
    position: 'UI设计师',
    interviewer: '周八',
    interviewTime: '2024-01-01 16:00:00',
    interviewType: 'final',
    status: 'pending',
    score: 0,
    feedback: ''
  }
])

// 获取面试类型样式
const getInterviewTypeType = (type) => {
  const typeMap = {
    first: 'primary',
    second: 'warning',
    final: 'success',
    phone: 'info',
    video: 'success'
  }
  return typeMap[type] || 'info'
}

// 获取面试类型文本
const getInterviewTypeText = (type) => {
  const typeMap = {
    first: '初试',
    second: '复试',
    final: '终试',
    phone: '电话面试',
    video: '视频面试'
  }
  return typeMap[type] || '未知'
}

// 获取面试状态样式
const getInterviewStatusType = (status) => {
  const statusMap = {
    pending: 'warning',
    ongoing: 'primary',
    completed: 'success',
    cancelled: 'info'
  }
  return statusMap[status] || 'info'
}

// 获取面试状态文本
const getInterviewStatusText = (status) => {
  const statusMap = {
    pending: '待面试',
    ongoing: '面试中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

// 查看面试记录
const viewRecord = (record) => {
  console.log('查看面试记录:', record)
}

// 编辑面试记录
const editRecord = (record) => {
  isEdit.value = true
  interviewForm.value = { ...record }
  showInterviewDialog.value = true
}

// 删除面试记录
const deleteRecord = async (record) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除面试记录"${record.candidateName}"吗？`,
      '确认删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const index = interviewRecords.value.findIndex(r => r.id === record.id)
    if (index > -1) {
      interviewRecords.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  } catch (error) {
    // 用户取消删除
  }
}

// 刷新面试记录
const refreshRecords = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    ElMessage.success('刷新成功')
  }, 1000)
}

// 提交面试记录
const submitInterview = async () => {
  if (!interviewFormRef.value) return
  
  try {
    await interviewFormRef.value.validate()
    
    // 这里应该调用API保存数据
    if (isEdit.value) {
      ElMessage.success('编辑成功')
    } else {
      const newRecord = {
        id: Date.now(),
        ...interviewForm.value,
        interviewTime: interviewForm.value.interviewTime ? 
          new Date(interviewForm.value.interviewTime).toLocaleString() : ''
      }
      interviewRecords.value.unshift(newRecord)
      ElMessage.success('添加成功')
    }
    
    showInterviewDialog.value = false
    resetInterviewForm()
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

// 重置表单
const resetInterviewForm = () => {
  interviewForm.value = {
    candidateName: '',
    position: '',
    interviewer: '',
    interviewTime: '',
    interviewType: '',
    status: '',
    score: 0,
    feedback: ''
  }
  isEdit.value = false
}

// 关闭对话框
const handleCloseDialog = () => {
  resetInterviewForm()
  showInterviewDialog.value = false
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  pagination.value.pageNo = 1
  // 这里应该重新获取数据
}

// 处理当前页变化
const handleCurrentChange = (page) => {
  pagination.value.pageNo = page
  // 这里应该重新获取数据
}

onMounted(() => {
  // 这里可以调用API获取面试记录数据
})
</script>

<style scoped>
.interview-records {
  padding: 2rem;
}

.page-title {
  font-size: 1.6rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  color: #2d3748;
}

.action-bar {
  background: white;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem;
}

.records-table {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

.pagination-container {
  padding: 1rem;
  display: flex;
  justify-content: center;
  background: white;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
}
</style>
